<template>
  <div>
    <div class="nav">
      <van-nav-bar
        title="购物袋"
        left-text="返回"
        @click-left="back"
        left-arrow
      >
        <template #right>
          <div @click="toggle">
            {{ isEdit ? "完成" : "编辑" }}
          </div>
        </template>
      </van-nav-bar>
    </div>

    <div class="logo">
      <img
        class="auto"
        src="../assets/icon/cartlogo.png"
        alt=""
        height="100px"
      />
    </div>

    <div class="swipe-cell" v-for="(item, index) in shopbagData" :key="index">
      <van-swipe-cell>
        <div class="pro-desc">
          <div class="left">
            <van-checkbox
              v-model="item.checked"
              @click="danxuan"
            ></van-checkbox>
          </div>
          <div class="center">
            <img class="auto" :src="item.small_img" alt="" />
          </div>
          <div class="right">
            <div class="name-rule">
              {{ item.name }}<span>{{ item.rule }}</span>
            </div>
            <div class="enname">
              {{ item.enname }}
            </div>
            <div class="proprice">
              <div class="price">￥{{ item.price }}</div>
              <div class="count">
                <van-stepper
                  v-model="item.count"
                  theme="round"
                  button-size="22"
                  disable-input
                  @change="changeCount(item)"
                />
              </div>
            </div>
          </div>
        </div>
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            @click="removeOne(index, item.sid)"
          />
        </template>
      </van-swipe-cell>
    </div>

    <!-- 结算 -->

    <van-submit-bar
      v-show="shopbagData.length != 0"
      :price="isEdit ? a : total"
      :button-text="isEdit ? '删除订单' : '提交订单'"
      button-color="#0C34BA"
      @submit="sub"
    >
      <van-checkbox v-model="allchecked" @click="allchecke">全选</van-checkbox>
    </van-submit-bar>

    <div v-show="nullstyle">
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="请添加商品"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "Bag",
  data() {
    return {
      nullstyle: false,
      isEdit: false,
      shopbagData: [],
      allchecked: false,
      // 总价
      total: 0,
      a: null,
      appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
      tokenString: this.$cookies.get("TOKEN"),
    };
  },
  created() {
    this.findAllShopcart();
    this.null();
  },
  methods: {
    //空状态
    null() {
      if (this.shopbagData.length == 0) {
        this.nullstyle = true;
      } else {
        this.nullstyle = false;
      }
    },
    //提交订单
    sub() {
      if (this.isEdit) {
        //删除
        this.duoshan();
        this.findAllShopcart();
        this.null();
      } else {
        let arr = [];
        this.shopbagData.forEach((item) => {
          if (item.checked) {
            arr.push(item.sid);
          }
        });
        this.$router.push({ name: "pay", query: { a:JSON.stringify(arr)} });
      }
    },
    //修改购物车数量
    changeCount(item) {
      let str = `appkey=${this.appkey}&tokenString=${this.tokenString}&sid=${item.sid}&count=${item.count}`;
      this.axios({
        method: "post",
        url: "/modifyShopcartCount",
        data: str,
      }).then((res) => {
        this.sum();
        console.log(res);
      });
    },
    //多个删除
    duoshan() {
      let arr = [];
      this.shopbagData.forEach((item) => {
        if (item.checked) {
          arr.push(item.sid);
        }
      });
      this.del(arr);
      this.sum();
      this.null();
    },
    //单个删除
    removeOne(index, sid) {
      console.log(index, sid);
      this.shopbagData.splice(index, 1);
      this.del([sid]);
      this.sum();
      this.null();
    },
    //删除方法
    del(sid) {
      let sids = JSON.stringify(sid);
      let str = `appkey=${this.appkey}&tokenString=${this.tokenString}&sids=${sids}`;
      this.axios({
        method: "post",
        url: "/deleteShopcart",
        data: str,
      }).then((res) => {
        this.sum();
        this.findAllShopcart();
        this.null();
        console.log(res);
      });
    },
    //计算总价 单价*数量
    sum() {
      let total = 0;
      this.shopbagData.forEach((item) => {
        if (item.checked) {
          total += item.count * item.price;
        }
      });
      this.total = total * 100;
    },
    //单选
    danxuan() {
      this.sum();
      for (let i = 0; i < this.shopbagData.length; i++) {
        if (!this.shopbagData[i].checked) {
          this.allchecked = false;
          return;
        }
      }
      this.allchecked = true;
    },
    //全选
    allchecke() {
      this.shopbagData.forEach((item) => {
        item.checked = this.allchecked;
      });
      this.sum();
    },
    back() {
      this.$router.push({ name: "Menu" });
    },
    toggle() {
      this.isEdit = !this.isEdit;
    },
    //查询用户所有购物车数据
    findAllShopcart() {
      let tokenString = this.$cookies.get("TOKEN");
      this.axios({
        method: "get",
        url: "/findAllShopcart",
        params: {
          appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          tokenString,
        },
      }).then((res) => {
        res.data.result.forEach((e) => {
          e.checked = false;
        });
        this.shopbagData = res.data.result;
        console.log(res);
        this.null();
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-submit-bar__price {
  color: #0c34ba;
}
.bottom /deep/.van-button {
  height: 40px;
  border-radius: 30px;
}
/deep/.van-button::before {
  width: 0;
}
/deep/.van-stepper--round .van-stepper__minus {
  border: 1px solid #0c34ba;
}
/deep/.van-stepper--round .van-stepper__plus {
  background-color: #0c34ba;
}
/deep/.van-submit-bar__bar {
  justify-content: space-between;
}
/deep/.van-button {
  height: 100%;
  border-radius: 10px;
  background-color: #0c34ba;
}
.pro-desc {
  margin: 10px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  .left {
    margin-left: 10px;
  }
  .center {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    margin: 10px;
  }
  .right {
    flex: 1;
    height: 100px;
    .name-rule {
      font-size: 14px;
    }
    .enname {
      color: #acacac;
      margin-top: 10px;
    }
    .name-rule span {
      font-size: 12px;
      margin-left: 12px;
      color: #acacac;
    }
    .proprice {
      margin-top: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price {
        font-size: 14px;
        font-weight: bold;
        color: #0c34ba;
      }
      .count {
        margin-right: 18px;
      }
    }
  }
}
</style>